<template>
    <div>
        <Title :title="title"></Title>
        <!-- 提供图表容器 -->
        <div ref="left2" style="height: 100px;"></div>
    </div>
</template>
<script>
// 引入图表
import { Pie } from '@antv/g2plot';
import { get } from '@/utils/request';
export default {
    data() {
        return {
            title: '设备状态分布',
            // 存放设备状态数据
            empData: []
        }
    },
    methods: {
        loadPie() {
            const piePlot = new Pie(this.$refs.left2, {
                appendPadding: 10,
                data: this.empData,
                angleField: 'value',
                colorField: 'type',
                color: ({ type }) => {
                    if (type === '在线') {
                        return '#a6a2ec';
                    }
                    return 'pink';
                },
                radius: 1.0,
                label: {
                    type: 'outer',
                    content: '{name} {value}台',
                    style: {
                        // 文本颜色
                        fill: 'white'
                    }
                },
                legend: {
                    position: 'top',
                    // 设置分类图例文本name属性
                    itemName: {
                        style: {
                            fill: "white"
                        }
                    }
                },
                tooltip: {
                    showMarkers: true,
                    domStyles: {
                        "g2-tooltip": {
                            background: '#147',
                            color: "white",
                            fontSize: 15
                        }
                    }
                },
                state: {
                    active: {
                        style: {
                            shadowBlur: 4,
                            stroke: '#000',
                            fill: 'yellow',
                        },
                    },
                },
                interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
            });
            piePlot.render();
        },
        // 封装请求获取设备数据
        async getEmpData() {
            let res = await get('/dashboard/queryDeviceOnlineNumber');
            // console.log(res,'222222');
            this.empData = res.data;
        }
    },
    async mounted() {
        await this.getEmpData();
        this.loadPie();
    }
}
</script>
<style lang="less" scoped></style>